<template>
  <div v-loading="load">
    <el-row>
      <tableComponents
        :isShow="false"
        :isHaveAdd="false"
        :isHaveExport="false"
        :isHavePagination="false"
      >
        <template v-slot:table>
          <el-row>
            <el-col :span="24" class="pd_20 cx_mid_ejlm">
              <el-col :span="24" class="mt20 cx_mid_ejlm_title tl">
                <div
                  class="tc cx_mid_title_tit"
                  v-for="(item, index) in pluginList"
                  :class="{ cx_mid_title_titu: index == Lindex }"
                  :key="index"
                >
                  <span @click="getcateList(item.value, index)">{{item.value}}</span>
                </div>
              </el-col>
            </el-col>
          </el-row>
          <el-row>
            <div class="pd_20 plug_box">
              <div class="cx_con_box pd_20" v-for="(item, index) in itemList" :key="index">
                <div class="pd_20 cx_mid_ejlm box_plu">
                  <el-col :span="11" class="f_l" style="position:relative">
                    <img src="../../assets/img/iph6.png" alt />
                    <img :src="$fnc.getImgUrl(item.pic)" class="plufin_img" alt />
                  </el-col>
                  <el-col :span="11" class="f_r tl">
                    <p class="cx_con_box_title">{{ item.title }}</p>
                    <p class="cx_con_box_con">功能简介：{{ item.desc }}</p>
                    <p
                      class="cx_con_box_jiage"
                      v-if="showStr.indexOf('价格') == -1"
                    >￥{{ item.price | keepTwoNum }}</p>
                    <p class="plugin_btn">
                      <el-button
                        :loading="$store.state.isLoading"
                        :type="item.is_open == '1'? 'primary': 'success' && showStr.indexOf('购买按钮') == -1"
                        @click="isOpenPlug(item.is_open, item)"
                        class="cx_con_box_an f_l"
                        v-if="(item.is_open == '1' && item.url) || item.is_open == '0'"
                      >{{item.is_open == "1" ? "查看" : "立即开通"}}</el-button>
                      <el-button
                        :loading="$store.state.isLoading"
                        type="primary"
                        v-if="showStr.indexOf('咨询客服') == -1"
                        @click="share_show = true"
                        class="cx_con_box_an f_r"
                      >咨询客服</el-button>
                      <el-button
                        :loading="$store.state.isLoading"
                        type="primary"
                        class="cx_con_box_an f_r"
                        :style="(item.is_open == '1' && item.url) ? 'margin-left:0' : 'margin-left:10px'"
                        v-if="item.video != 0 && item.video != '' && showStr.indexOf('视频') == -1"
                        @click="playVideo(item)"
                      >观看视频</el-button>
                    </p>
                  </el-col>
                </div>
              </div>
            </div>
          </el-row>
        </template>
      </tableComponents>
    </el-row>

    <el-dialog title="提示" :close-on-click-modal="false" :visible.sync="dioForm" width="30%" center>
      <el-form label-position="right" label-width="80px" :model="form">
        <el-form-item label="姓名">
          <el-col :span="12">
            <el-input size="small" clearable v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-col :span="12">
            <el-input size="small" clearable v-model="form.tel"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="$store.state.isLoading" @click="dioForm = false">取 消</el-button>
        <el-button :loading="$store.state.isLoading" type="primary" @click="dioForm = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      width="600"
      append-to-body
      custom-class="vide0-con"
      :visible.sync="showVideo"
      @close="close_video"
    >
      <video
        id="video"
        autoplay="autoplay"
        :src="$fnc.getImgVideo(itemForm.video)"
        width="600"
        height="400"
        controls="controls"
      >您的浏览器不支持视频播放</video>
    </el-dialog>
    <van-popup v-model="share_show" transition="fade" get-container="body" class="share_box_pop">
      <div class="share_box" style="position:relative">
        <img :src="admin_kf" alt style="width:100%" />
        <div class="share_box-foote">
          <span></span>
          <van-divider
            :style="{
              color: '#a5a5a5',
              borderColor: '#c8c8c8',
              padding: '0',
              margin: '0'
            }"
          >保存二维码添加客服</van-divider>
          <span></span>
        </div>
        <div class="share_box-btn">
          <van-button
            round
            type="info"
            @click="uploadShare()"
            color="linear-gradient(to right, #feed3d, #ffdb18)"
          >保存二维码</van-button>
        </div>
      </div>

      <div class="upload_shaer_btn">
        <div class="tc">
          <van-icon
            @click="share_show = false"
            name="close"
            size="30px"
            color="#fff"
            style="margin-top:20px"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<style lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s linear;
  /*transform: translate3D(0,0,0);*/
}

.fade-enter,
.fade-leave-to {
  transform: translate3D(-50%, -100%, 0);
  /*transform: translateX(10px);*/
}
.mt20 {
  margin-top: 20px;
}
.cx_top_title {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  margin-bottom: 10px;
}
.cx_top_con {
  background: #fff;
  padding: 20px 0;
}
.cx_top_con_col {
  height: 50px;
  line-height: 50px;
}
.cx_top_con_c {
  padding-left: 30px;
  font-size: 18px;
  font-weight: bold;
  color: #ff4673;
}
.cx_top_con_qian {
  font-size: 14px;
}
.cx_top_con_dw {
  font-weight: 100;
  color: #000;
  margin-left: 5px;
}
.cx_top_con_djzj {
  color: #33d4a0;
}
.cx_mid_title {
  height: 43px;
  display: inline-block;
  cursor: pointer;
  width: 140px;
  line-height: 43px;
  border-top: solid 2px #f2f2f2;
  color: #a1a1a1;
  background-color: #f2f2f2;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.cx_mid_titleu {
  background-color: #fff;
  border-top: solid 2px #38a9f9;
}
.cx_mid_title_tit {
  display: inline-block;
  width: 150px;
  cursor: pointer;
  border: solid 1px #e9e9e9;
  border-bottom: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-left: 15px;
}
.cx_mid_title_titu {
  color: #fff;
  font-weight: bold;
  background-color: #38a9f9;
  border: solid 1px #38a9f9;
  border-bottom: none;
}
.cx_mid_ejlm {
  background: #fff;
}
.cx_mid_ejlm_title {
  border-bottom: solid 1px #e9e9e9;
  height: 41px;
  line-height: 41px;
}
.cx_con_box {
  margin: 0 0px 45px;
  padding: 20px;
}
.cx_con_box_title {
  height: 60px;
  line-height: 60px;
}
.cx_con_box_con {
  color: #adadad;
  font-size: 12px;
  line-height: 25px;
  height: 150px;
  overflow: hidden;
}
.cx_con_box_jiage {
  height: 40px;
  line-height: 40px;
  color: #ff4673;
}
.cx_con_box_an {
  width: 45%;
  height: 30px;
  line-height: 30px;
  padding: 0;
}
.cxSwith {
  height: 25px !important;
  line-height: 25px !important;
  display: inline-block;
}
.box_plu {
  background: #fff;
  border: solid 1px #e9e9e9;
  border-radius: 20px;
  box-shadow: 0px 0px 15px #dedede;
  overflow: hidden;
}
.cxSwith > .el-switch__core {
  height: 25px !important;
  border-radius: 16px !important;
  border: 1px solid #dfdfdf !important;
}
.cxSwith > .el-switch__core:after {
  width: 20px !important;
  height: 20px !important;
  top: 2px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.cxSwith.el-switch.is-checked .el-switch__core::after {
  margin-left: -21px !important;
}
.cxSwith > .el-switch__label {
  text-indent: 5px;
}
.plufin_img {
  position: absolute;
  top: 40px;
  left: 11px;
  width: 148px;
}
.cx_mid_title_tit > span {
  display: block;
  width: 100%;
  height: 100%;
}
.plug_box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  min-width: 1300px;
}
.plug_box > div {
  width: 450px;
}
.plugin_btn {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.plugin_btn .el-button {
  margin-bottom: 10px;
}
.vide0-con {
  background-color: transparent;
  border: none;
  box-shadow: none;
  width: 600px;
}
.vide0-con .el-dialog__header {
  display: none;
}
.share_box_pop {
  width: 100%;
  height: 85%;

  background-color: transparent;
  > div {
    width: 20%;
    margin: 0 auto 0;
  }
}
.share_box {
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  margin: 0 auto;
  padding: 20px 0px;
  border-radius: 10px;

  .share_top {
    width: 40%;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  > p {
    font-size: 32px;
    font-weight: bold;
    line-height: 32px;
    padding: 5px 0;
  }
  .share_info {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      font-size: 16px;
      font-weight: 400;
      margin: 0 5px;
    }
    span {
      padding: 0 5px;
      color: #ff9919;
    }
  }
  .share_wx {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    img {
      width: 18px;
    }
    p {
      font-weight: bold;
      padding-left: 10px;
      font-size: 18px;
    }
  }
  .share_ewm {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin: 15px 0;
    .share_ewm_img {
      width: 45%;
      img {
        width: 100%;
      }
    }
    p {
      font-size: 14px;
      font-weight: bold;
      color: #8e8e8e;
      padding: 10px 0;
    }
    img {
      width: 100%;
    }
  }
  .share_line {
    width: 80%;
    height: 2px;
    background-color: #f2f2f2;
  }
}
.share_close {
  // width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px 0;
  position: absolute;
  right: 15px;
  top: 0px;
  background-color: transparent;
}
.share_close .van-icon {
  font-size: 30px;
  border-radius: 50%;
  background-color: transparent;
  border: 3px solid #ff2b05;
  color: #ff2b05;
}
.upload_shaer_btn {
  color: #fff;
  font-size: 14px;
  position: relative;
  text-align: center;
  .upload_img_ewm {
    display: block;
    width: 34px;
    margin: 0 auto;
  }
  span {
    display: inline-block;
    margin-top: 20px;
  }
}
</style>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import { Popup, Button, Divider, Icon } from "vant";
export default {
  components: {
    HeadTitle,
    // eslint-disable-next-line vue/no-unused-components
    [Popup.name]: Popup,
    // eslint-disable-next-line vue/no-unused-components
    [Button.name]: Button,
    // eslint-disable-next-line vue/no-unused-components
    [Divider.name]: Divider,
    // eslint-disable-next-line vue/no-unused-components
    [Icon.name]: Icon,
  },
  data() {
    return {
      showStr: "",
      share_show: false,
      showVideo: false,
      money: 0,
      s: "",
      pluginList: [],
      itemList: [],
      Lindex: "0",
      dioForm: false,
      itemForm: {
        video: "",
        title: "",
      },
      form: {
        name: "",
        tel: "",
      },
      menuList: this.$store.state.menuList,
      load: false,
      admin_kf: require("../../assets/img/kf2.jpg"),
    };
  },

  methods: {
    getadminkf() {
      this.$api.getSettings.findConfig({ iden: "admin_kf " }).then((res) => {
        if (res.data.code == 200) {
          this.admin_kf =
            res.data.result || require("../../assets/img/kf2.jpg");
        }
      });
    },
    getsetting() {
      this.$api.getSettings
        .findConfig({ iden: "module_market " })
        .then((res) => {
          if (res.data.code == 200) {
            this.showStr = res.data.result || "";
          }
        });
    },
    uploadShare() {
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = this.admin_kf;
    },
    close_video() {
      document.getElementById("video").pause();
      // this.showVideo = false;
    },
    playVideo(item) {
      this.itemForm = item;
      this.showVideo = true;
    },
    get_usermoney() {
      this.$api.getAdmin.get_usermoney({}).then((res) => {
        if (res.data.code == 200) {
          this.money = res.data.result;
        }
      });
    },
    getplugin() {
      var param = {};
      this.$api.getAdmin.getAdminPluginList(param).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.pluginList = res.data.result;
          this.getcateList(this.pluginList[0].value, 0);
        }
      });
    },
    getcateList(str, index) {
      this.load = true;
      this.Lindex = index;
      var param = {};
      param.cate = str;
      this.$api.getAdmin.getAdmincateList(param).then((res) => {
        if (res.data.code == 200) {
          this.itemList = res.data.result;
        }
        this.load = false;
      });
    },
    getTop() {},
    getItem(index) {
      this.dIndex = index;
    },
    isOpenPlug(i, item) {
      if (i == "0") {
        this.$swal({
          title: `您确定要开通${item.title}吗`,
          text: `将支付余额${item.price}开通${item.title}`,
          type: "success",
          showCancelButton: true,
          confirmButtonColor: "#409EFF",
          confirmButtonText: "是的，我要开通",
          cancelButtonColor: "#DD6B55",
          cancelButtonText: "容我三思",
        }).then((willDelete) => {
          if (willDelete.value) {
            this.$api.getAdmin.open_plugin({ id: item.id }).then((res) => {
              if (res.data.code == 200) {
                this.$swal("开通成功！", "您已经成功开通此模块。", "success");
                this.getplugin();
                this.get_usermoney();
                // var obj = this.menuList;
                // this.$fnc.tomenu(item.url, obj);
              } else {
                this.$swal("开通失败！", res.data.result, "error");
              }
            });
          }
        });
      } else {
        var url = item.url;
        var obj = this.menuList;
        this.$fnc.tomenu(url, obj);
      }
    },
  },
  mounted() {
    this.getplugin();
    this.get_usermoney();
    this.getsetting();
    this.getadminkf();
  },
  computed: {
    getMenu() {
      return this.$store.state.menuList;
    },
    imgUrl() {
      if (location.href.indexOf("ljwl168") >= 0) {
        return require("../../assets/img/kf3.png");
      } else {
        return require("../../assets/img/kf2.jpg");
      }
    },
    isShowPrice() {
      if (location.href.indexOf("ljwl168") >= 0) {
        return false;
      } else {
        return true;
      }
    },
  },
  watch: {
    getMenu(obj) {
      this.menuList = obj;
    },
  },
};
</script>
